<template>
  <view class="definite">
    <u-navbar
      :is-back="true"
      :custom-back="BackM"
      title="修改商户分润"
      back-text=""
    >
    </u-navbar>
    <view class="title">- 商户信息 -</view>
		<view class="item">
		  <span>商户名称：</span>
		  <u-input v-model="userName" placeholder="请输入商户联系人"/>
		</view>
		<view class="item">
		  <span>联系电话：</span>
		  <u-input v-model="phone" placeholder="请输入商户手机号"/>
		</view>

    <view class="em">
      注：若设置分润，该手机号将作为分润账户，可通过手机号登陆进行分润提现
    </view>
    <view class="title">- 是否给商户分润 -</view>
    <view class="item">
      <span style="float: left">设置{{profitPattern==0?'绝对分润':'相对分润'}}比例</span>
      <span style="font-size: 0.6rem; float: left">(非必填)</span>
      <image @click="changeM" class="item-image" src="../../../style/image/my/A32.jpg" alt="" />
    </view>
    <view class="item">
      <span style="float: left">{{profitPattern==0?'绝对分润':'相对分润'}}比例：</span>
      <input v-model="profitRatio" class="me" type="text" placeholder="设置0到100" />
      <span class="en">%</span>
    </view>
	<view class="item">
	  <span style="float: left">虚拟分润比例：</span>
	  <input v-model="virtualProfitRatio" class="me" type="text" placeholder="设置0到100" />
	  <span class="en">%</span>
	</view>
    <view class="em">
      注：您当前持有的分润比例，将作为100%的值，你可分给商户从0% 到100%的值。
    </view>
    <view class="item" style="justify-content: space-between">
      <view style="display: flex; align-items: center">
        <view>商户查看订单权限</view>
        <view class="it">商户收益订单明细，将展示给商户端查看</view>
      </view>
      <u-switch
        v-model="checkedOne"
        active-color="#02af74"
        inactive-color="#cccccc"
      ></u-switch>
    </view>
    <view class="item" style="justify-content: space-between">
      <view style="display: flex; align-items: center">
        <view>商户查看分润比例权限</view>
        <view class="it">商户分润比例，将展示给商户端查看</view>
      </view>
      <u-switch
        v-model="checkedTwo"
        active-color="#02af74"
        inactive-color="#cccccc"
      ></u-switch>
    </view>
    <!-- <view class="title">- 手续费 -</view>
    <view class="item">
      <span style="float: left">手续费：</span>
      <input v-model="drawRatio" class="me" type="text" placeholder="请设置手续费" />
      <span class="en">%</span>
    </view>
    <view class="em">
      注：您填写增加部分的提现手续费，将在商户提现时以分润的方式发放到您的账户
    </view> -->
    <view class="footP">
      <view
        @click="nextM"
        style="padding: 0.7rem; display: flex; align-items: center"
      >
        <!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
        <view style="color: white; margin-left: 0.2rem">提交</view>
      </view>
    </view>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { saveShopInfo } from "../../../utils/uniApi";

import {AppModule} from '../../../store/modules/app'

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public checkedOne = false;
  public checkedTwo = false;
  
  public userName:any;//
  public phone:any;//
  public profitRatio:any;  //分润比例
  public virtualProfitRatio:any;  //模拟分润比例
  public profitPattern:any=0;   // 分润模式（0 绝对 ，1 相对）
  public shopProfitRatio:any; //查看分润比例权限（0 无权限 ，1 允许）
  public drawRatio:any;      //提现手续费
  public showOrder:any;  //查看订单权限（0 无权限 ，1 允许）
  public shopId:any;//商户id

  created() {}
  
  onLoad(value:any){
	  var shopDic = JSON.parse(decodeURIComponent(value.shopDic))
	  console.log('输出编辑分润的信息：'+JSON.stringify(shopDic))
	  this.shopId = shopDic.id;
	  this.userName = shopDic.shopName;
	  this.phone = shopDic.phone;
	  this.profitRatio = shopDic.profitRatio*100;
	  this.virtualProfitRatio = shopDic.virtualProfitRatio*100;
	  this.profitPattern = shopDic.profitPattern;
	  this.shopProfitRatio = shopDic.shopProfitRatio;
	  if(this.shopProfitRatio == 1){
		  this.checkedTwo = true
	  }else{
		  this.checkedTwo = false
	  }
	  this.showOrder = shopDic.showOrder;
	  if(this.showOrder == 1){
	  		  this.checkedOne = true
	  }else{
	  		  this.checkedOne = false
	  }
	  this.drawRatio = shopDic.drawRatio*100;
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
  } 
  
  onHide(){
  	  uni.hideLoading();
  }

  changeM(){
        if(this.profitPattern==0){
           this.profitPattern=1
        }else{
			this.profitPattern=0
        }
  }

	  BackM() {
		uni.navigateBack({
		  //返回
		  delta: 1,
		});
	  }
	  nextM(){
		  
		  let data:any={
			  id:parseInt(this.shopId),
			  shopName:this.userName,
			  phone:this.phone,
			  profitPattern:this.profitPattern,   // 分润模式（0 绝对 ，1 相对）
			  profitRatio:this.profitRatio,  //	分润比例
			  virtualProfitRatio:this.virtualProfitRatio,  //	虚拟分润比例
			  drawRatio:this.drawRatio,		//提现手续费
			  showOrder:'',	//查看订单权限（0 无权限 ，1 允许）
			  shopProfitRatio:'',		//查看分润比例权限（0 无权限 ，1 允许）
		  }

		   if(this.checkedOne==true){
			   data.showOrder=1
		   }else{
			   data.showOrder=0
		   }
			if(this.checkedTwo==true){
			   data.shopProfitRatio=1
		   }else{
			   data.shopProfitRatio=0
		   }
		   if(data.profitRatio>1){
			   data.profitRatio = data.profitRatio/100
		   }
		   if(data.virtualProfitRatio>1){
			   data.virtualProfitRatio = data.virtualProfitRatio/100
		   }
		   if(data.drawRatio>1){
			   data.drawRatio = data.drawRatio/100
		   }
		   console.log('修改商户分润参数',JSON.stringify(data))
		   
		   uni.showLoading({
		   	title: '加载中'
		   });
		   saveShopInfo(data).then((res:any)=>{
		      uni.hideLoading();
		      if(res.data.code==200){
				  uni.showToast({
				   title: '编辑成功',
				   icon:'none',
				   duration: 2000
				  });
				   //提交成功后    返回
				   uni.navigateBack({
					   delta: 1,
				   });
		      }else{
				  uni.showToast({
				   title: '编辑失败',
				   icon:'none',
				   duration: 2000
				  });
		      }
		      
		   })
	  }
}
</script>

<style  lang="scss"  scoped>
.definite {
  font-family: PingFang SC;
  background: #f3f5f7;
  height: 100%;
}
uni-page-body {
  height: 100%;
}
.sure {
  height: 2.5rem;
  line-height: 2.5rem;
  color: #ffffff;
  background: #02af74;
  border-radius: 0;
  cursor: pointer;
  margin-top: 1.5rem;
}
.title {
  padding: 0.2rem 0.5rem;
  text-align: center;
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 1rem;
}
.item {
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 0.98rem;
  background: #ffffff;
  padding: 0.6rem 0.5rem;
  margin-bottom: 0.08rem;
  position: relative;
}
.em {
  padding: 0.6rem 0.5rem;
  font-size: 0.62rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  background: #ffffff;
  line-height: 0.76rem;
  margin-bottom: 0.06rem;
}
.me {
  font-size: 0.7rem;
  color: #999999;
  width: 12rem;
}
.item-image {
  width: 4.15rem;
  height: 1.17rem;
  padding-left: 0.5rem;
  cursor: pointer;
}
.en {
  position: absolute;
  right: 1rem;
  top: 0.7rem;
  font-size: 1.01rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
.it {
  font-size: 0.55rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 0.76rem;
}
.em_image {
  position: absolute;
  top: 0.8rem;
  right: 0.5rem;
  width: 3rem;
  height: 1.5rem;
}
uni-button:after {
  border-radius: 0;
}

.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>